<!-- 微邮 -->
<template>
  <div v-show="visible">
    <div
      :class="[fullScreen?'full-screen':'']"
      class="pro-crm-home-mail"
    >
      <div class="micro-mail">
        <!-- 标题 -->
        <div class="itemview-header">
          <div class="message-status">
            <div
              :class="{active:activeStatus==item.code}"
              @click="activeStatus=item.code;"
              v-for="item in status"
              :key="item"
              class="item"
            >
              {{ $i18n.locale == 'zh_CN' ? item.text : item.entext }}
              <span>({{ item.count }})</span>
            </div>
          </div>
          <span
            @click="openCreate"
            class="createNew"
          >+ {{ $t('m.weiyou_create') }}</span>
          <i
            v-if="isShowBtn"
            @click="changeFullScreen(!fullScreen)"
            :class=" fullScreen ? 'jeicon-minus':'jeicon-max' "
            class="jeicon resize"
          />
          <i
            v-if="isShowBtn"
            @click="close"
            class="jeicon jeicon-error close"
          />
        </div>

        <div class="itemview-body">
          <query-condition @getSearchParams="getSearchParams">
            <template #otherSearch>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{ choosedText }}<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in downItem"
                    :key="index"
                    :command="item"
                    :style="choosedRule == item.code ? {color: '#409EFF', 'font-weight': 700}: ''"
                  >
                    {{ $i18n.locale == 'zh_CN' ? item.text : item.entext }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </query-condition>
          <!-- 列表 -->
          <div
            :style="{'height': listHeight}"
            class="mail-list"
          >
            <mail-item
              v-for="(item, index) in mailList"
              v-on="$listeners"
              @deleteMail="deleteMail(index)"
              @newComment="newComment"
              @setReaded="setReaded"
              @doFocus="doFocus"
              @updatePhoto="updatePhoto"
              :key="index"
              :mailItem="item"
              :themeWidth="itemWidth"
            >
              <!-- <template #tools>
                <span
                  v-if="item.funcName"
                  class="mail-module"
                >{{ item.funcName }}</span>
                <span
                  @click="openFunc(item)"
                  v-if="item.modelName"
                  style="cursor:pointer"
                >{{ item.modelName }}</span>
              </template> -->
            </mail-item>
            <Nodata v-if="noData" />
          </div>
          <!-- 分页条 -->
          <page-bar
            ref="pagebar"
            :page-size="pageSize"
            :total-count="totalCount"
            @changePageNumber="changePageNumber"
          />
        </div>
      </div>
    </div>
    <create-mail
      ref="createMail"
      :handleType="'create'"
      @doCreate="doCreate"
    />
  </div>
</template>
<script>
import VueI18n from 'vue-i18n';
import PageBar from '../../components/listview/pagebar';
import MailItem from './component/mail_item';
import QueryCondition from './component/queryCondition';
import CreateMail from './component/create';
import Nodata from '../../components/noData/index';
import { getNoreadCount, getMyMailList, getTypeTotalCount } from './actions/actions';

const i18n = new VueI18n({
  locale: JE.getCookies('je-local-lang') || 'zh_CN', // 语言标识
  messages: {
    zh_CN: require('./assets/lang/zh'), // 中文语言包
    en: require('./assets/lang/en'), // 英文语言包
  },
});

export default {
  name: 'MicroMail',
  components: {
    PageBar, MailItem, QueryCondition, CreateMail, Nodata,
  },
  props: {},
  i18n,
  data() {
    return {
      visible: false,
      mailList: [],
      status: [
        {
          text: '我收到的', entext: 'Received', code: '1', count: 0,
        },
        {
          text: '我发出的', entext: 'Sent', code: '2', count: 0,
        },
      ],
      downItem: [
        { text: '全部', entext: 'All', code: '1' },
        { text: '已读', entext: 'Hasread', code: '2' },
        { text: '未读', entext: 'Unread', code: '3' },
        { text: '心标', entext: 'Concerned', code: '4' },
      ],
      choosedRule: '1',
      choosedText: '',
      activeStatus: '1',
      startTime: '', // 开始时间
      endTime: '', // 结束时间
      keyword: '', // 关键字查询
      totalCount: 0, // 总条数，绑定分页条
      pageSize: 10,
      pageNumber: 1,
      fullScreen: false,
      listHeight: '390px',
      itemWidth: '465px',
      noData: false,
      isShowBtn: true,
    };
  },
  watch: {
    activeStatus() {
      this.loadMailList();
    },
    visible(nv) {
      if (nv) {
        this.initCount();
      }
    },
  },
  mounted() {
    this.choosedText = this.$i18n.locale == 'zh_CN' ? '全部' : 'All';
  },
  methods: {
    updatePhoto() {
      this.initCount();
    },
    /* openFunc(item) {
      JE.showFunc(item.funcCode, { type: 'form', id: item.modelId });
    }, */
    setReaded() {
      this.initCount();
    },
    // 获取未读数量的角标数值
    initCount() {
      getNoreadCount({
        modelId: '',
      }).then((data) => {
        if (data.success) {
          this.$emit('doact', 'refreshBadge', {
            type: 'MICROMAIL',
            num: true,
            numObj: {
              numCount: data.obj.receive + data.obj.send,
            },
          });
        }
      });
      getTypeTotalCount({
        modelId: '',
      }).then((data) => {
        // if (data.success) {
        this.status[0].count = data.obj.receive;
        this.status[1].count = data.obj.send;
        // this.status[2].count = data.obj.attention;
        // }

        this.loadMailList(); // 调数据列表接口
      });
    },
    // 关注收藏
    doFocus() {
      this.initCount();
    },
    // 删除微邮
    deleteMail(index) {
      this.mailList.splice(index, 1);
      this.initCount();
    },
    // 显示
    setVisible(visible) {
      this.visible = visible;
    },
    // 获取参数
    getParams() {
      return {
        keyword: this.keyword,
        modelId: '',
        startTime: this.startTime,
        endTime: this.endTime,
        type: this.activeStatus,
        readType: this.choosedRule,
        limit: this.pageSize,
        pageNumber: this.pageNumber,
      };
    },
    getSearchParams(param) {
      this.keyword = param.keyword;
      this.startTime = param.startTime;
      this.endTime = param.endTime;
      this.loadMailList();
    },
    // 加载数据
    loadMailList() {
      this.noData = false;
      getMyMailList(this.getParams()).then((data) => {
        if (data.success) {
          if (data.rows.length === 0) {
            this.noData = true;
          }
          this.mailList = data.rows;
          this.totalCount = data.totalCount;
        }
      });
    },
    // 分页
    changePageNumber(page) {
      switch (page) {
        case 'reduce':
          this.pageNumber -= 1;
          break;
        case 'add':
          this.pageNumber += 1;
          break;
        case '1':
          this.pageNumber = 1;
          break;
        case 'end':
          this.pageNumber = parseInt(this.totalCount / this.pageSize) + (this.totalCount % this.pageSize > 0 ? 1 : 0);
          break;
        default:
          break;
      }
      this.loadMailList();
    },
    // 打开新建微邮
    openCreate() {
      this.$refs.createMail.dialogVisible = true;
    },
    // 新建微邮
    doCreate() {
      this.initCount();
    },
    // 发新评论
    newComment() {
      this.initCount();
    },
    // 关闭
    close() {
      this.fullScreen = false;
      this.listHeight = this.fullScreen ? `${document.getElementsByClassName('micro-mail')[0].offsetHeight - 140}px` : '390px';
      this.itemWidth = this.fullScreen ? '1035px' : '465px';
      this.pageSize = this.fullScreen ? 30 : 10;
      this.pageNumber = 1;
      this.loadMailList();
      this.visible = false;
      this.$parent.doAct('clearSelect');
    },
    // 下拉菜单选择
    handleCommand(command) {
      this.choosedRule = command.code;
      this.choosedText = this.$i18n.locale == 'zh_CN' ? command.text : command.entext;
      this.loadMailList();
    },
    //  全屏
    changeFullScreen(fullScreen) {
      this.fullScreen = fullScreen;
      this.pageSize = this.fullScreen ? 30 : 10;
      this.pageNumber = 1;
      this.loadMailList();
      setTimeout(() => {
        this.listHeight = this.fullScreen ? `${document.getElementsByClassName('micro-mail')[0].offsetHeight - 140}px` : '390px';
        this.itemWidth = this.fullScreen ? '1035px' : '465px';
      }, 20);
    },
  },
};
</script>

<style lang="scss">
.micro-mail {
  padding: 10px 20px;
  padding-top: 0;
  background: #ffffff;
  .itemview-header {
    position: relative;
    font-size: 14px;
    color: #808080;
    height: 50px;
    line-height: 50px;
    // padding:10px 0;
    .message-status {
      .item {
        display: inline-block;
        border-radius: 4px;
        line-height: 30px;
        height: 30px;
        padding: 0 20px;
        cursor: pointer;
        &.active {
          background: #386ad0;
          color: #fff;
        }
      }
    }

    .createNew {
      color: #2f6bcf;
      font-size: 14px;
      cursor: pointer;
      position: absolute;
      right: 70px;
      top: 0;
    }
    .close,
    .resize {
      position: absolute;
      right: 10px;
      top: 0;
      font-size: 12px;
      color: #cccccc;
      cursor: pointer;
      &:hover {
        color: #2f6bcf;
      }
    }
    .resize {
      right: 40px;
    }
  }
  .itemview-body {
    border: 1px solid #e4e7ed;
    position: relative;

    .el-dropdown {
      margin-right: 20px;
      .el-dropdown-link {
        cursor: pointer;
        color: #2f6bcf;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
    }
    .mail-list {
      height: 390px;
      overflow-y: auto;
      position: relative;
      scrollbar-width: none;
    }
  }
  .je-vue-pagebar {
    height: 50px;
    line-height: 50px;
    background-color: #f4f7fd;
    padding: 0 20px;
  }
}
.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  animation: unset;
  background: #f0f2f5;
  .micro-mail {
    background: #ffffff;
    position: relative;
    width: 1250px;
    margin: 0 auto;
    height: 100%;
  }
}
</style>
